<template>
  <div class="BindDoctor">
    <van-nav-bar title="添加医生"
                 left-text="" left-arrow @click-left="($router.push('/frontPage'))"/>
    <div>
      <template v-show="doctorListShow" v-for="item in doctorList">
        <div class="doctorList">
          <div>
            <div class="row1">
              <van-image class="doctorImg" round width="3rem" height="3rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
              <div class="row1-1">
                <span>{{ item.dname ? item.dname : '李小爱' }}</span><span>{{ item.djob ? item.djob : '主治医生' }} </span>
              </div>
            </div>
            <div class="row2">从业经验:{{ item.dexperience ? item.dexperience : '从业5年' }}</div>
            <div class="row3">所属医院:{{ item.hname ? item.hname : '成都市癫痫医院' }}</div>
          </div>
          <div>
            <van-button type="primary" size="small" @click="bindDoctorBtn(item.did)">绑定</van-button>
          </div>
        </div>
      </template>
      <div v-show="myDoctorShow">
        <div class="doctorList">
          <div>
            <div class="row1">
              <van-image class="doctorImg" round width="3rem" height="3rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
              <div class="row1-1">
                <span>{{
                    myDoctorMsg.dname ? myDoctorMsg.dname : '李小爱'
                  }}</span><span>{{ myDoctorMsg.djob ? myDoctorMsg.djob : '主治医师' }} </span>
              </div>
            </div>
            <div class="row2"><span>从业经验:{{ myDoctorMsg.dexperience ? myDoctorMsg.dexperience : '从业15年' }}</span></div>
            <div class="row3"><span>所属医院:{{ myDoctorMsg.hname ? myDoctorMsg.hname : '成都市癫痫医院' }}</span></div>
          </div>
          <div>
            <van-button type="primary" size="small" @click="cancelBindDoctorBtn(myDoctorMsg.did)">解绑</van-button>
          </div>
        </div>
        <van-divider :style="{ color: 'black'}">医生简介：</van-divider>
        <p>能熟练完成胸外科各种疑难复杂手术。擅长肺、食管及
          纵隔良恶性疾病的鉴别诊断和根治性手术治疗。与卢强
          副教授一起发明了世界独创性的“三孔式”前纵隔病变
          切除术。喉返神经监测在胸外科手术中的应用为国内国
          际首次应用。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {Toast} from "vant";

export default {
  name: "BindDoctor",
  computed: {
    ...mapGetters(['loginUserInfo', 'isBindDoctor', 'userPhone'])
  },
  data() {
    return {
      doctorListShow: false,
      doctorList: [],
      myDoctorMsg: '',
      myDoctorShow: false,
    }
  },
  mounted() {
    this.doctorList_show();
  },
  methods: {
    ...mapActions(['setIsBindDoctor']),
    //取消绑定医生
    cancelBindDoctorBtn(did) {
      this.$dialog.confirm({
        message: '确认取消绑定该医生？',
      }).then(() => {
        // on confirm
        this.$service.frontPageService.cancelMyDoctor(did).then(res => {
          if (res.status == 200) {
            this.setIsBindDoctor(0);
            Toast.success('解绑成功');
            this.$router.push('/frontPage');
          } else {
            Toast.fail('解绑失败，请稍后再试');
          }
        })
      })
          .catch(() => {
            // on cancel
          });

    },
    //绑定医生
    bindDoctorBtn(did) {
      console.log(localStorage.getItem('isBindDoctor-app'));
      this.$service.frontPageService.bindDoctor(did, this.userPhone).then(res => {
        if (res.data.code == 200) {
          this.setIsBindDoctor(did);
          Toast.success('绑定成功');
          this.$router.push('/frontPage');
        }
      })
    },
    //医生列表
    doctorList_show() {
      if (this.isBindDoctor == '0') {//未绑定医生
        this.doctorListShow = true;
        this.$service.frontPageService.doctorList().then(res => {
          if (res.status == 200) {
            this.doctorList = res.data.data;
          }
        })
      } else {//展示我的医生的信息
        this.myDoctorShow = true;
        this.$service.frontPageService.myDoctorMsg(this.isBindDoctor).then(res => {
          this.myDoctorMsg = res.data.data[0];
          console.log('我的医生的信息=' + this.myDoctorMsg);
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.BindDoctor {
  background-color: white;
}

.doctorList {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;

  .row1, .row2, .row3 {
    margin-top: 0.5rem;
  }

  .row1 {
    display: flex;

    .row1-1 {
      display: flex;
      flex-direction: column;
      margin-left: 0.5rem;

      span {
        margin-top: 0.5rem;
      }
    }
  }
}

p {
  margin: 10px;
  font-size: 14px;
  line-height: 2rem;
}

</style>
